<template>
	<ComTrigger :popup-offset="16" @visible="data=>visibleFlag=data">
		<div class="com-icon">
			<ComIcon :icon="chooseIcon" style="color: #666" />
		</div>
		<template #content="{ close, visible }">
			<div class="icon-data" v-if="visible">
				<div style="padding: 4px 8px">
					<ComTabs v-model="tabValue" :options="options"></ComTabs>
				</div>
				<div class="icon-box">
					<template v-for="IconComponent in dataList" :key="IconComponent">
						<div class="icon" v-if="IconComponent" @click="handleIcon(IconComponent, close)">
							<ComIcon :icon="IconComponent" style="color: #666"></ComIcon>
						</div>
					</template>
				</div>
			</div>
		</template>
	</ComTrigger>
</template>

<script setup lang="ts">
import ComTrigger from "@/components/ComTrigger.vue";
import * as ArcoVueIcon from "@arco-design/web-vue/es/icon";
import incofont from "@/styles/font/iconfont.json";

const visibleFlag = ref(false)
const dataList = computed(() => {
	if (tabValue.value === 1) {
		return Object.keys(ArcoVueIcon);
	} else if (tabValue.value === 2) {
		const arr = JSON.parse(JSON.stringify(incofont?.glyphs || []));
		const list = arr.map((i) => incofont?.css_prefix_text + i.font_class);
		return list;
	}
});
const emit = defineEmits(["update:modelValue",'change']);

const props = defineProps({
	modelValue: {
		type: String
	}
});
const tabValue = ref(1);
const options = ref([
	{ label: "Arco图标", value: 1 },
	{ label: "Each图标", value: 2 }
]);
// const chooseIcon = computed({
// 	get: () => props.modelValue || 'EachApp_wenben',
// 	set: (val) => emit("update:modelValue", val)
// });
const chooseIcon = ref("");
watch(
	() => props.modelValue,
	(val) => {
		chooseIcon.value = val || "EachApp_wenben";
		emit("update:modelValue", chooseIcon.value)
	},
	{ immediate: true }
);
const handleIcon = (item, close) => {
	chooseIcon.value = item;
	close();
	emit("update:modelValue", chooseIcon.value)
	emit('change')
};
defineExpose({
	visibleFlag
})
</script>

<style scoped lang="scss">
.com-icon {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	border: 1px solid #f1f1f1;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}
.icon-data {
	// width: 333px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}
.icon-box {
	padding: 8px;
	overflow: auto;
	// display: flex;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	flex-wrap: wrap;
	height: 208px;
	gap: 8px;
	font-size: 16px;
	.icon {
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border-radius: 4px;
		&:hover {
			background-color: #f2f2f2;
		}
	}
}
</style>
